<template>
  <div :class="{ exhibition: true, openExhibition: isShow }">
    <section class="item-head" @click.stop="toggle">
      <section class="item-title">
        <section class="title-icon">
          <svg
            t="1608014654591"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4965"
          >
            <path
              d="M280.54 898.54L667.09 512 280.54 125.46a36 36 0 0 1 50.92-50.92l412 412A35.92 35.92 0 0 1 754 512a35.9 35.9 0 0 1-4.84 18c-0.23 0.39-0.47 0.78-0.71 1.16a36 36 0 0 1-5 6.27l-412 412a36 36 0 0 1-50.92-50.91z"
              p-id="4966"
            ></path>
          </svg>
        </section>
        <section class="title-content">
          {{ obj.title }}
        </section>
      </section>
      <section class="item-total">
        {{ obj.total }}
      </section>
    </section>
    <section class="item-body" v-if="isShow">
      <ul>
        <li
          v-for="(item, index) in obj.list"
          :key="index"
          @click.stop="_edit(item.id)"
          :class="{ activeLi: item.id == flagID }"
        >
          <section class="iName">
            {{ item.cn }}
          </section>
          <section class="iDel" @click.stop="_del(item.id)">
            <svg
              t="1608111369129"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2551"
            >
              <path
                d="M519.620465 0c-103.924093 0-188.511256 82.467721-192.083349 185.820279H85.015814A48.91386 48.91386 0 0 0 36.101953 234.686512a48.91386 48.91386 0 0 0 48.913861 48.866232h54.010046V831.345116c0 102.852465 69.822512 186.844279 155.909954 186.844279h439.200744c86.087442 0 155.909953-83.491721 155.909954-186.844279V284.100465h48.91386a48.91386 48.91386 0 0 0 48.913861-48.890046 48.91386 48.91386 0 0 0-48.913861-48.866233h-227.756651A191.559442 191.559442 0 0 0 519.620465 0z m-107.234232 177.080558c3.548279-49.771163 46.627721-88.540279 99.851907-88.540279 53.224186 0 96.327442 38.745302 99.351813 88.540279h-199.20372z m-111.997024 752.044651c-30.981953 0-65.083535-39.15014-65.083535-95.041488V287.744h575.488v546.839814c0 55.915163-34.077767 95.041488-65.059721 95.041488H300.389209v-0.500093z"
                fill="#D81E06"
                p-id="2552"
              ></path>
              <path
                d="M368.116093 796.814884c24.361674 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.908465-48.818605-44.27014-48.818604-24.33786 0-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.293954 48.818605z m154.933581 0c24.361674 0 44.293953-21.670698 44.293954-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.293954-48.818604-24.33786 0-44.27014 21.670698-44.270139 48.818604v278.623256c0 27.147907 19.932279 48.818605 44.293953 48.818605z m132.810419 0c24.33786 0 44.27014-21.670698 44.27014-48.818605v-278.623256c0-27.147907-19.932279-48.818605-44.27014-48.818604s-44.27014 21.670698-44.27014 48.818604v278.623256c0 27.147907 19.360744 48.818605 44.27014 48.818605z"
                fill="#D81E06"
                p-id="2553"
              ></path>
            </svg>
          </section>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import { getUser } from "@/service/home.js";

export default {
  props: ["obj", "flagID", "setFlagID"],
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    toggle(flag) {
      if (typeof flag == "boolean") {
        this.isShow = flag;
      } else {
        this.isShow = !this.isShow;
      }
    },
    _edit(id) {
      this.setFlagID(id);
      this.$emit("edit", id);
    },
    _del(id) {
      this.$emit("del", id);
      this.$emit("update");
    },
  },
};
</script>

<style lang="scss">
$border-gray-color: #474747;
$theme-green-color: #48aa4e;
$font-color: #999;
$part-bg-color: #2d3838;
.exhibition {
  border: 1px solid $border-gray-color;
  color: $font-color;
  margin-bottom: 15px;
  width: 99%;
  text-align: center;

  .item-head {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;
    cursor: pointer;
    height: 30px;
    .item-title {
      height: 30px;
      display: flex;
      align-items: center;
      .title-icon {
        width: 14px;
        height: 14px;
        margin: 0 5px;
        transition: transform 0.5s;
        svg > path {
          fill: $font-color;
        }
      }
    }
    .item-total {
      background-color: rgba(#f00, 0.5);
      color: #fff;
      font-weight: lighter;
      font-size: 8px;
      height: 20px;
      padding: 0 7px;
      display: table;
      text-align: center;
      line-height: 20px;
      margin-right: 5px;
      border-radius: 100px;
    }
  }
  .item-body {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      li {
        font-size: 8px;
        height: 30px;
        border: 1px solid $border-gray-color;
        display: flex;
        align-items: center;
        padding: 0 5px;
        margin-top: -1px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        &:hover {
          background-color: rgba($border-gray-color, 0.6);
          .iDel {
            visibility: visible;
          }
        }
        .iDel {
          visibility: hidden;
          svg {
            height: 15px;
            width: 15px;
            path {
              fill: $theme-green-color;
            }
          }
        }
      }
      .activeLi {
        border-left: 3px solid $theme-green-color;
        background-color: rgba($theme-green-color, 0.2);
        &:hover {
          background-color: rgba($theme-green-color, 0.2);
        }
      }
    }
  }
}

.openExhibition {
  background-color: rgba($border-gray-color, 0.9);
  .title-icon {
    transform: rotate(90deg);
  }
  .item-body {
    background-color: $part-bg-color;
  }
}
</style>